<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow>
      <!-- 头部功能 -->
      <template #header>
        <div>
          <el-input
            clearable
            placeholder="请输入查询关键字"
            v-model="query"
            class="input-with-select"
            style="width: 400px"
            @clear="reloadGoodlistQuery"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              style="width: 50px"
              @click="reloadGoodlistQuery"
            ></el-button>
          </el-input>
          <router-link
            tag="el-button"
            style="background: #409eff; color: #fff"
            :to="{ name: 'add' }"
            class="addGoods"
            >添加新商品</router-link
          >
        </div>
      </template>

      <!-- 正文内容 -->
      <el-table border :data="goods" v-loading="loading">
        <el-table-column prop="id" label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间"> </el-table-column>
        <el-table-column label="操作" width="200" #default="{ row }">
          <router-link
            tag="el-button"
            class="editBtn"
            style="background: #409eff; color: #fff"
            effect="dark"
            :to="{
              name: 'edit',
              params: {
                gid: row.goods_id,
              },
            }"
            ><i class="el-input__icon el-icon-edit"></i
          ></router-link>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除用户"
            placement="bottom"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeGoodById(row)"
            ></el-button>
          </el-tooltip>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="reloadUserlistSize"
        @current-change="reloadUserlistPage"
        :current-page="pagenum"
      >
      </el-pagination>
      <!-- @size-change="handleSizeChange" pageSize改变时触发(每一页)
        @current-change="handleCurrentChange" currentPage 改变时触发(当前页)
        :current-page="currentPage" 当前页数-->
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goods: [],
      total: 16, //总页数
      pagesize: 10, //页面数据调
      pagenum: 1, //当前页码
      query: "", //加载页面条件限制参数
      loading: false,
      good: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      addFormVisible: false,
      updateFormVisible: false,
      limitFormVisible: false,
      formLabelWidth: "100px",
      gid: "",
    };
  },
  methods: {
    async initGoodsList() {
      try {
        this.loading = true;
        let data = await this.$api.getGoodsList({
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        });
        this.goods = data.goods;
        this.total = data.total;
        this.pagenum = parseInt(data.pagenum); // 这行代码可以定义也可以不定义，主要为保证和后端服务器结果同步
        console.log(11111111, data);
      } catch (error) {
        console.log("UserView-initGoodsList-error:", error);
      } finally {
        this.loading = false;
      }
    },
    //更新查询goods的参数
    reloadGoodlistQuery() {
      this.pagenum = 1;
      this.initGoodsList();
    },
    //添加新商品
    addGoodList() {
      console.log(1111);
    },
    // //展示删除商品弹框
    // showRemoveGoodPage(data) {
    //   this.removeDialogVisible = true;
    //   this.gid = data.goods_id;
    //   console.log(2222, data.goods_id);
    // },
    //删除商品
    removeGoodById(data) {
      try {
        this.$confirm("确定要删除该商品吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$api.deleteGoodsList(data.goods_id);
          this.removeDialogVisible = false;
          this.$message.success("删除成功");
          // console.log(11, this.gid);
          this.initGoodsList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      } catch (error) {
        console.log("UserView-removeGoodById-error:", error);
      }
    },
    //currentPage 改变时触发(当前页)
    reloadUserlistSize(newPagePage) {
      // console.log(this.pagenum,newPagePage);
      this.pagesize = newPagePage;
      this.initGoodsList();
    },
    //pageSize改变时触发(每一页)
    reloadUserlistPage(newPageNum) {
      // console.log(this.pagenum, newPageNum);
      this.pagenum = newPageNum;
      this.initGoodsList();
    },
  },
  created() {
    this.initGoodsList();
  },
};
</script>

<style lang="less" scoped>
.addGoods {
  margin-left: 22px;
}
.el-button.editBtn {
  padding: 7px 10px;
}
.el-input__icon {
  line-height: 0;
}
</style>